在 上调用 HTMLMediaElement.play() 之后，在视频流开始流动之前，有一段（希望简短）的时间段过去了。为了避免在此之前一直阻塞，我们为 video 加上一个 canplay 事件的监听器，当视频播放实际开始时会触发该事件。那时，视频对象中的所有属性都已基于流的格式进行配置。

这个回调什么都不做，除非它是第一次被调用；这是通过查看我们的 streaming 变量的值进行测试，这是第一次运行此方法时为 false。

如果这是第一次运行，我们会根据视频的实际大小，video.videoWidth 和要渲染视频宽度的宽度（witdh）之间的大小差异来设置视频的高度。

最后，通过在视频和画布上调用 Element.setAttribute() 来设置视频和画布的宽度（witdh）和高度（height），以使得两者相互匹配。最后，我们将 streaming 变量设置为 true，以防止我们无意中再次运行此设置代码。

为了在每次用户点击 startbutton 时捕获静态照片，我们需要向按钮添加一个事件监听器，以便在发出 click 事件时被调用：

这个方法很简单：它只是调用我们的 takepicture() 函数，在从流中捕获帧的部分中定义，然后在接收的事件上调用 Event.preventDefault()，以防止点击被多次处理。

startup() 方法中只有两行代码：

这就是我们调用 clearphoto() 方法的地方，我们将在下面的清理照片框部分进行描述。